<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    Ajax学习计划 |
    
    无敌小笼包</title>
  
    <link rel="shortcut icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/css/style.css">
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  
  <script src="/js/pace.min.js"></script>
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-Ajax" class="article article-type-post" itemscope itemprop="blogPost">

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Ajax学习计划
    </h1>
  

      </header>
    

    
      <div class="article-meta">
        <a href="/2016/01/27/Ajax/" class="article-date">
  <time datetime="2016-01-27T06:11:20.000Z" itemprop="datePublished">2016-01-27</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/js/">js</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      
      
      
        <p>　　<strong>AJAX：</strong>Asynchronous Javascript And XML（异步JavaScript和XML）。是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。</p>
<a id="more"></a>
<h2 id="Ajax介绍"><a href="#Ajax介绍" class="headerlink" title="Ajax介绍"></a>Ajax介绍</h2><h3 id="特点："><a href="#特点：" class="headerlink" title="特点："></a>特点：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">什么是服务器：</div><div class="line">搭建简单的本地服务器软件Wamp、XAMPP，提供简单的用户服务，读取数据。</div></pre></td></tr></table></figure>
<h3 id="使用Ajax"><a href="#使用Ajax" class="headerlink" title="使用Ajax"></a>使用Ajax</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">基础：请求并显示静态TXT、json文件</div><div class="line">字符集编码：UTF-8、GB2312，使用相同的编码。</div><div class="line">缓存：chrome下的缓存还不是很严重，IE下的缓存比较严重，除非关闭浏览器。</div><div class="line"></div><div class="line">缓存的工作原理：通过URL进行缓存的。通常可以使用URL?t= + new Date().getTime()</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">window.onload = function ()&#123;</div><div class="line">	var oBtn = document.getElementById(&apos;Btn1&apos;);</div><div class="line"></div><div class="line">	oBtn.onclick = function ()&#123;</div><div class="line">		ajax(&apos;aa.txt?t=&apos; + new Date().getTime(),</div><div class="line">			function(str)&#123;</div><div class="line">				alert(str);</div><div class="line">			&#125;,function()&#123;</div><div class="line">				alert(&apos;失败&apos;);</div><div class="line">			&#125;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="通过Ajax读取的都是字符串"><a href="#通过Ajax读取的都是字符串" class="headerlink" title="通过Ajax读取的都是字符串"></a>通过Ajax读取的都是字符串</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">通过eval()将文件内容解析成JS可以识别的内容</div><div class="line">window.onload = function ()&#123;</div><div class="line">	var oBtn = document.getElementById(&apos;Btn1&apos;);</div><div class="line"></div><div class="line">	oBtn.onclick = function ()&#123;</div><div class="line">		ajax(&apos;aa.txt?t=&apos; + new Date().getTime(),</div><div class="line">			function(str)&#123;</div><div class="line">				var SA = eval(str);</div><div class="line">				alert(SA[1]);</div><div class="line">			&#125;,function()&#123;</div><div class="line">				alert(&apos;失败&apos;);</div><div class="line">			&#125;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h4 id="读取Json文件"><a href="#读取Json文件" class="headerlink" title="读取Json文件"></a>读取Json文件</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">window.onload = function ()&#123;</div><div class="line">	var oBtn = document.getElementById(&apos;Btn1&apos;);</div><div class="line">	var oUls = document.getElementById(&apos;ul1&apos;);</div><div class="line"></div><div class="line">	oBtn.onclick = function ()&#123;</div><div class="line">		ajax(&apos;aa.txt?t=&apos; + new Date().getTime(),</div><div class="line">			function(str)&#123;</div><div class="line">				var SA = eval(str);</div><div class="line"></div><div class="line">				for(var i=0;i&lt;SA.length;i++)&#123;</div><div class="line">					var oLi = document.createElement(&apos;li&apos;);</div><div class="line">					oLi.innnerHTML=&apos;用户名：&lt;strong&gt;&apos; + SA[i].name +&apos;&lt;/strong&gt;密码：&lt;span&gt;&apos; + SA[i].pass + &apos;&lt;/span&gt;&apos;;</div><div class="line">					//添加到Ul里</div><div class="line">					oUl.appenChild(oLi);</div><div class="line">				&#125;</div><div class="line">				alert(SA[1]);</div><div class="line">			&#125;,function()&#123;</div><div class="line">				alert(&apos;失败&apos;);</div><div class="line">			&#125;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">HTTP请求的方法</div><div class="line">GET：用于获取数据（如：浏览贴子）</div><div class="line">POST：用于上传数据（如：用户注册）</div><div class="line">区别：</div><div class="line">get是在URL里传送数据：安全性低、容量有限（2000字符），有缓存，适合请求信息</div><div class="line">post是通过HTTP请求，安全性好一点，无缓存，适合传递信息</div><div class="line">安全的方式使用HTTPS。</div><div class="line">GET方式：</div><div class="line">?name=word&amp;password=password</div></pre></td></tr></table></figure>
<h2 id="Ajax进阶"><a href="#Ajax进阶" class="headerlink" title="Ajax进阶"></a>Ajax进阶</h2><h3 id="创建Ajax"><a href="#创建Ajax" class="headerlink" title="创建Ajax"></a>创建Ajax</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">IE6</div><div class="line">var oAjax = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);</div><div class="line"></div><div class="line">var oAjax = new XMLHttpRequest();</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">注意：</div><div class="line"></div><div class="line">//使用没有定义的变量——报错</div><div class="line">alert(a);</div><div class="line"></div><div class="line">//使用没有定义的属性——undefined</div><div class="line">alert(window.a);</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">function ()&#123;</div><div class="line">	if(window.XMLHttpRequest)&#123;</div><div class="line">		var oAjax = new XMLHttpRequest();</div><div class="line">	&#125;else&#123;</div><div class="line">		var oAjax = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h3 id="连接服务器"><a href="#连接服务器" class="headerlink" title="连接服务器"></a>连接服务器</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">open（方法，连接的文件名，同步/async异步true）ajxa其实都是异步的</div><div class="line">open(method,url,async);</div><div class="line">oAjax.opan(&apos;GET&apos;,&apos;a.text?=t&apos;+new Date().getTime(),true);</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">同步和异步的区别?</div><div class="line"></div><div class="line"></div><div class="line">同步：（一次加载）浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,j进行下一步操作。</div><div class="line"></div><div class="line">异步：（同时加载）浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。</div><div class="line"></div><div class="line">（待完善）</div></pre></td></tr></table></figure>
<h3 id="发送请求"><a href="#发送请求" class="headerlink" title="发送请求"></a>发送请求</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">oAjax.send();</div><div class="line">send(string);</div></pre></td></tr></table></figure>
<h3 id="接收返回"><a href="#接收返回" class="headerlink" title="接收返回"></a>接收返回</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">oAjax.onreadystatechange = function()&#123;</div><div class="line">	//浏览器和服务器，进行到哪一步了</div><div class="line">	if(oAjax.readyState==4)&#123;</div><div class="line">		if(oAjax.status==200)&#123;</div><div class="line">			alert(&apos;成功：&apos;+oAjax.status);</div><div class="line">		&#125;else&#123;</div><div class="line">			alert(&apos;失败：&apos;+oAjax.status);</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">0 （未初始化）</div><div class="line">1 （载入）</div><div class="line">2 （载入完成）send()方法完成，已接收全部信息</div><div class="line">3 （解析）正在解析响应</div><div class="line">4 （完成）完成但不代表成功</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">Ajax Status请求状态</div><div class="line"></div><div class="line">200 成功</div><div class="line">301</div><div class="line">304</div><div class="line">404</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">IE6</div><div class="line">var oAjax = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);</div><div class="line"></div><div class="line">var oAjax = new XMLHttpRequest();</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line">封装函数</div><div class="line"></div><div class="line">function ajax(url,fnSucc,fnFaild)&#123;</div><div class="line">	if(window.XMLHttpRequest)&#123;</div><div class="line">		var oAjax = new XMLHttpRequest();</div><div class="line">	&#125;else&#123;</div><div class="line">		var oAjax = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	oAjax.opan(&apos;GET&apos;,&apos;url?=t&apos;+new Date().getTime(),true);</div><div class="line"></div><div class="line">	oAjax.send();</div><div class="line"></div><div class="line">	oAjax.onreadystatechange = function()&#123;</div><div class="line">		if(oAjax.readyState==4)&#123;</div><div class="line">			if(oAjax.status==200)&#123;</div><div class="line">				fnSucc(oAjax.responseText);</div><div class="line">			&#125;else&#123;</div><div class="line">				if(fnFaild)&#123;</div><div class="line">					fnFaild(oAjax.status);</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ajax(&apos;a.txt&apos;,function(str)&#123;</div><div class="line">	alert(str);</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line">封装函数</div><div class="line"></div><div class="line">function ajax(url,data,fnSucc,fnFaild)&#123;</div><div class="line">	if(window.XMLHttpRequest)&#123;</div><div class="line">		var oAjax = new XMLHttpRequest();</div><div class="line">	&#125;else&#123;</div><div class="line">		var oAjax = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);</div><div class="line">	&#125;</div><div class="line"></div><div class="line">	oAjax.opan(&apos;POST&apos;,&apos;url&apos;,true);</div><div class="line"></div><div class="line">	oAjax.setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;);</div><div class="line"></div><div class="line">	oAjax.send(data);</div><div class="line"></div><div class="line">	oAjax.onreadystatechange = function()&#123;</div><div class="line">		if(oAjax.readyState==4)&#123;</div><div class="line">			if(oAjax.status==200)&#123;</div><div class="line">				fnSucc(oAjax.responseText);</div><div class="line">			&#125;else&#123;</div><div class="line">				if(fnFaild)&#123;</div><div class="line">					fnFaild(oAjax.status);</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line">ajax(&apos;a.txt&apos;,&apos;name=&apos; + document.getElementById(&quot;staffName&quot;).value + &apos;&amp;number=&apos; + document.getElementById(&quot;staffNumber&quot;).value + &apos;&amp;sex=&apos; + document.getElementById(&quot;staffSex&quot;).value + &apos;&amp;job=&apos; + document.getElementById(&quot;staffJob&quot;).value,function(str)&#123;</div><div class="line">	alert(str);</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h2 id="Ajax数据"><a href="#Ajax数据" class="headerlink" title="Ajax数据"></a>Ajax数据</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">XML、Json：同等数据量，XML更大</div></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://blog.mango16.cc/2016/01/27/Ajax/" data-id="cjrbtw1xx000p6d8h1c9buh92"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/">js</a></li></ul>

    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/2016/02/27/OOCSS/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            面向对象的CSS样式
          
        </div>
      </a>
    
    
      <a href="/2016/01/19/AjaxStatus/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">Ajax Status请求状态</div>
      </a>
    
  </nav>


  

  
    
  <div class="gitalk" id="gitalk-container"></div>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: 'caba8826a61790936307',
        clientSecret: '09a15037dcab30d9adf35a53ec6961939169f797',
        repo: 'm9rco.github.io',
        owner: 'm9rco',
        admin: ['m9rco'],
        // id: location.pathname,      // Ensure uniqueness and length less than 50
        id: md5(location.pathname),
        distractionFreeMode: false  // Facebook-like distraction free mode
      })

  gitalk.render('gitalk-container')
  </script>

  

</article>



</section>
  <footer class="footer">
  
  <div class="outer">
    <ul class="list-inline">
      <li>&copy; 2019 无敌小笼包</li>
      <i class="pulse"></i>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>

<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/hexo.svg" alt="无敌小笼包"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">归档</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/nagging">叽咕</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="Search">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>

<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>
  <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/lazyload.min.js"></script>


  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/search.js"></script>


<script src="/js/ocean.js"></script>

</body>
</html>